import { Component, ChangeDetectionStrategy, ViewChild, TemplateRef } from '@angular/core';
import { ModalService } from '@iux/live';

@Component({
  selector: 'app-demo3',
  templateUrl: './demo3.component.html',
  styles: [
    `
      .exs-first,
      .exs-second,
      .exs-third {
        color: #39f;
        cursor: pointer;
      }
      .exs-first:hover,
      .exs-second:hover,
      .exs-third:hover {
        color: #39f;
        opacity: 0.7;
      }
    `,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class Demo3Component {
  constructor(private modalService: ModalService) {}

  @ViewChild('firstTpl', { static: false }) firstTpl: TemplateRef<any>;
  @ViewChild('secondTpl', { static: false }) secondTpl: TemplateRef<any>;
  @ViewChild('thirdTpl', { static: false }) thirdTpl: TemplateRef<any>;

  open() {
    const first = document.querySelectorAll('.exs-first');
    this.modalService.create({
      lvType: 'drawer',
      lvWidth: 'L',
      lvDrawerPositionOffset: ['0px', '0px', '0px', '0px'],
      lvModalKey: 'firstModal',
      lvModality: false,
      lvOuterClosable: {
        exclusions: Array.from(first),
      },
      lvHeader: 'First-level',
      lvContent: this.firstTpl,
    });
  }

  open2() {
    const exs2 = document.querySelectorAll('.exs-second');
    this.modalService.create({
      lvType: 'drawer',
      lvWidth: 'M',
      lvDrawerPositionOffset: ['0px', '0px', '0px', '0px'],
      lvModalKey: 'secondModal',
      lvParentModalKeys: ['firstModal'],
      lvModality: false,
      lvOuterClosable: {
        exclusions: Array.from(exs2),
      },
      lvHeader: 'Second-level',
      lvContent: this.secondTpl,
    });
  }

  open3() {
    const third = document.querySelectorAll('.exs-third');
    this.modalService.create({
      lvType: 'drawer',
      lvWidth: 'S',
      lvDrawerPositionOffset: ['0px', '0px', '0px', '0px'],
      lvModalKey: 'thirdModal',
      lvParentModalKeys: ['firstModal', 'secondModal'],
      lvModality: false,
      lvOuterClosable: {
        exclusions: Array.from(third),
      },
      lvHeader: 'Third-level',
      lvContent: this.thirdTpl,
    });
  }
}
